<template>
    <div class="special-sale">
      <div class="clearfix special-list" v-for="i in salelist" :key="i.id">
       <div class="left">
           <p>眼部<span></span>鼻部<span></span>面部轮廓<span></span>眼部<span></span></p>
           <h2>{{i.text}}</h2>
           <p><span>{{i.zhekou}}</span>折起</p>
           <p class="red">ON SALE</p>
           <p class="address" ><Icon type="ios-pin-outline" class="icon" size="22"/>{{i.address}}</p>
           <p class="time"><Icon type="md-time" class="icon" />{{i.time}}</p>
       </div>
          <div class="right">
              <img src="../../assets/meirong1.jpg" alt="">
              <div>
                  <span @click="fun()">去抢购</span>
              </div>
          </div>
      </div>
       <div style="text-align: center;margin-bottom: 50px"> <Page :total="100" />  </div>

    </div>
</template>

<script>
    export default {
        name: "SpecialSale",
        props:['salelist'],
        methods:{
            fun () {
                this.$router.push({path:'/commoditydetails/index'})
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../style/style";
   .special-sale{
       border: none;
       .special-list{
           width: 900px;
           height: 300px;
           border: 2px solid @theme-color-dark;
           margin-bottom: 30px;
           .left{
               width: 220px;
               height: 300px;
               padding: 20px;
               float: left;
               >:first-child{
                   overflow: hidden;
                   text-overflow:ellipsis;
                   white-space: nowrap;
                   font-size: 14px;
                   font-weight: normal;
                   font-stretch: normal;
                   letter-spacing: 0px;
                   color: #333333;
                   text-align: left;
                   >:last-child{
                      display: none;
                   }

                   >span{
                       margin: 0 6px;
                       border-right: 1px solid #333333;
                       font-size: 14px;
                       color: #333333;
                   }
               }
               h2{
                   font-size: 16px;
                   font-weight: normal;
                   font-stretch: normal;
                   letter-spacing: 0px;
                   color: #333333;
                   text-align: center;
                   padding-top: 15px;
               }
               p{
                   text-align: center;
                   font-size: 20px;
                   font-weight: normal;
                   font-stretch: normal;
                   letter-spacing: 0px;
                   color: #666666;
                   >span{
                       font-size: 58px;
                       font-weight: normal;
                       font-stretch: normal;
                       letter-spacing: 0px;
                       color: #ff0000;
                   }
               }
               .red{
                   font-size: 16px;
                   font-weight: normal;
                   font-stretch: normal;
                   letter-spacing: 0px;
                   color: #ff4f03;

               }
               .address{
                   font-size: 14px;
                   font-weight: normal;
                   font-stretch: normal;
                   letter-spacing: 0px;
                   color: #636363;
                   overflow: hidden;
                   text-overflow:ellipsis;
                   white-space: nowrap;
                   text-align: left;
                   padding-top: 35px;
                   padding-bottom:5px;
               }
               .time{
                   font-size: 14px;
                   font-weight: normal;
                   font-stretch: normal;
                   letter-spacing: 0px;
                   color: #636363;
                   overflow: hidden;
                   text-overflow:ellipsis;
                   white-space: nowrap;
                   text-align: left;
               }
               .icon{
                   color: #92dff1;
                   font-size: 20px;
                   margin-right: 5px;
               }
           }
           .right{
               float: left;
               width: 676px;
               height: 300px;
               img{
                   width: 100%;
                   height:296px;
               }
               >div{
                   width: 676px;
                   height: 44px;
                   background-color:rgba(0,0,0,0.5);
                   position: absolute;
                   margin-top: -49px;
                   >span{
                       width: 92px;
                       height: 27px;
                       background-color: @theme-color-dark;
                       border-radius: 4px;
                       display: block;
                       float: right;
                       margin-right: 50px;
                       border-bottom: 2px solid #b6405b;
                       color: white;
                       text-align: center;
                       line-height: 27px;
                       font-size: 18px;
                       margin-top: 10px;
                       cursor: pointer;
                   }
               }
           }
       }
   }
</style>